<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    li{list-style: none;}
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name">
        <hr>
        <textarea v-model="msg"></textarea>
        <button @click="add">发表</button>

        <ul>
            <li v-for="(item,index) in arr">
                <h3>{{item.name}}</h3>
                <p>{{item.msg}}</p>
                <p>{{item.ctime|timeformat('')}}</p>
                <input type="checkbox" v-model="item.pool">
            </li>
        </ul>
        <button @click="del">删除</button>
    </div>
    <script>

        Vue.filter('timeformat',function(dateStr,pattern){
            var dt=new Date(dateStr);
            var y=dt.getFullYear();
            var m=dt.getMonth()+1;
            var d=dt.getDate();
            var h=dt.getHours();
            var mm=dt.getMinutes();
            var ss=dt.getSeconds();

            return `${y}-${m}-${d} ${h}:${mm}:${ss}`
            // if(pattern.toLowerCase()==='yyyy-mm-dd'){
            //     return `${y}-${m}-${d}`
            // }else{
            //     var h=dt.getHours();
            //     var mm=dt.getMinutes();
            //     var ss=dt.getSeconds();
            //     return `${y}-${m}-${d} ${h}:${mm}:${ss}`
            // }

        })
    new Vue({
        el:"#app",
        data:{
            name:"",
            msg:"",
            arr:[], 

        },
        methods:{
            add(){
                var tmp={
                    name:this.name,
                    msg:this.msg,
                    ctime:new Date(),
                    pool:false
                }
            this.arr.push(tmp)
            // this.name=this.msg="";

            },
            del(){
                var arr1=[];
                this.arr.forEach((item,index)=>{                 
                    if(!item.pool){
                        arr1.push(item)
                    }
                })
                this.arr=arr1
           }
           

        },
        // http2.0 使用服务端推的概念 它允许服务端在数据还没发送到客户端之前就将数据发送到客户端的缓存中 从而提高性能
        // 提供了更多的加密支持
        // 使用多路技术，将多个消息在同一个连接上同时交差
        // 使用头压缩，即使非常小的请求，在请求和响应header的时候也只占很小比例的带宽

    })    
    </script>
    
</body>
</html>